<template>
  <div>
    <h3>shallowReactive</h3>
    <p>
      一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露
    </p>
    <p>state: {{ state }}</p>
    <button @click="setState">setState</button>
  </div>
</template>

<script>
import { shallowReactive, isProxy, reactive, isRef, ref } from "vue";
export default {
  name: "Vue3CourseShallowReactiveView",
  setup() {
    // shallowReactive
    // 1. 只有修改对象的第一层属性值，才会具备响应式；
    // 2. 内部嵌套的引用类型，没有转化为Proxy，是普通的JS对象，丢失了响应式；

    // 使用场景：
    // 接口返回的数据，不需要修改，可以使用 shallowReactive 来包裹对象，让外层具备响应式，内部对象不具备响应式。主要和shallowRef一样，用于大数据量的性能优化。
    const state = shallowReactive({
      name: "小明",
      age: 22,
      other: {
        address: "郑州市",
      },
      children: [1, 2, 3, 4],
    });
    const setState = () => {
      console.log(state);
      console.log(isProxy(state.value.other));
      // state.name = "小王";
      // state.other = { a: 100 };
      state.value.other.address = "北京市";
    };
    return {
      state,
      setState,
    };
  },
};
</script>

<style lang="less" scoped></style>
